<%--
  Created by IntelliJ IDEA.
  User: zhangyuan
  Date: 2020-04-15
  Time: 10:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<head>

    <meta charset="UTF-8">
    <title>流程型应用设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/sys/userInfor.css"/>
    <link rel="stylesheet" type="text/css" href="/css/sys/url.css"/>
    <script src="../js/jquery/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
    <script src="/js/workflow/work/workform.js"></script>
    <style>
        html,body{
            height: 100%;
        }
        .content .right {
            position: relative;
            float: none;
            width: 100%;
        }
        .title {
            height: 35px;
            line-height: 35px;
        }
        .title img {
            margin-left: 15px;
            vertical-align: middle;
            width: 24px;
            height: 26px;
            padding-bottom: 8px;
        }
        .title span {
            margin-left: 0px;
            font-size: 22px;
            line-height: 35px;
        }

        .right_module {
            position: absolute;
            top: 12px;
            left: 50px;
            right: 50px;
            /*bottom: 50px;*/
            padding: 50px 30px;
            /*border: 1px solid #ccc;*/
            border-radius: 3px;
        }

        .right_box {
            position: relative;
            width: 65%;
            height: 100%;
            margin-left: 17%;
        }
        .box_left {
            position: relative;
            /*height: 40%;*/
            float: left;
            width: 30%;
            height: 210px;
            overflow: auto;
            margin-left: 13%;
        }
        .box_right {
            /*float: right;*/
            position: relative;
            width: 30%;
            /*height: 40%;*/
            height: 210px;
            overflow: auto;
        }
        .box_rights {
            float: right;
            position: relative;
            width: 100%;
            height: 100%;
            overflow: auto;
        }


        .box_con {
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            padding-top: 6px;
            width: 100%;
            box-sizing: border-box;
        }
        .box_con .left_ul,
        .box_con .right_ul{
            height: 100%;
            overflow: auto;
            padding: 5px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .ul_item {
            padding: 5px;
            line-height: 24px;
            cursor: pointer;
        }
        .save_setting {
            position: absolute;
            background-color: #fff;
            outline: none;
            border: 1px solid #ccc;
            padding: 8px 20px;
            bottom: 5px;
            width: 80px;
            left: 50%;
            margin-left: -55px;
            cursor: pointer;
            border-radius: 5px;
        }
        .btn-mini {
            width: 28px;
            height: 28px;
        }
        .btn_top{
            background: url('/img/commonTheme/desktop/top.png') no-repeat ;
        }
        .btn-bottom{
            background: url('/img/commonTheme/desktop/bottom.png') no-repeat ;
        }
        .btn-right{
            background: url('/img/commonTheme/desktop/right.png') no-repeat ;
        }
        .btn-left{
            background: url('/img/commonTheme/desktop/left.png') no-repeat ;
        }
        .inputlayout>ul ul>li.active {
            background: #4898d5;
            color: #fff;
        }
        .active{
            background: #4898d5;
            color: #fff;
        }
        .actives{
            background: #4898d5;
            color: #fff;
        }
    </style>

</head>
<body>
<div class="content" id="myTable">
    <div class="right">
        <div class="title">
            <img src="../img/person.png" >
            <span>流程型应用设置</span>
        </div>


        <div class="right_module" >
            <div style="display: flex;margin-left: 17%">
                <h4 style="font-weight: 500">是否新建</h4>
                <div style="margin-left: 10px;margin-top: 3px;">
                    <input type="radio" name="queryNewYn" value="1" />是
                    <input type="radio" name="queryNewYn" value="0" checked />否
                </div>
            </div>
            <h4 style="margin: 10px 17%;font-weight: 500">查询字段配置</h4>
            <div class="right_box exchangeTop" style="border: 1px solid #ccc;padding:9px 0px 14px 0px">
                <div class="box_left">
                    <div class="box_con">
                        <ul class="left_ul  allacti " ></ul>
                    </div>
                </div>

                <div style="position:relative;float:left;margin-top:7%;margin-left:5%;margin-right:4%">
                    <input class="btn btn-mini btn-right"    type="button" style="cursor:pointer;border: none;">
                    <br><br>
                    <input class="btn btn-mini btn-left"    type="button" style="cursor:pointer;border: none;" >
                </div>

                <div class="box_right" style="margin-right: 7%">
                    <div class="box_con">
                        <ul class="right_ul  allactis ">

                        </ul>
                    </div>
                </div>

            </div>
            <h4 style="margin: 10px 17%;font-weight: 500">列表字段配置</h4>
            <div class="right_box exchangeBottom" style="border: 1px solid #ccc;padding: 9px 0px 14px 0px">
                <div class="box_left">
                    <div class="box_con">
                        <ul class="left_ul  allacti " ></ul>
                    </div>
                </div>


                <div style="position:relative;float:left;margin-top:7%;margin-left:5%;margin-right:4%">
                    <input class="btn btn-mini btn-right"    type="button" style="cursor:pointer;border: none;">
                    <br><br>
                    <input class="btn btn-mini btn-left"    type="button" style="cursor:pointer;border: none;" >
                </div>

                <div class="box_right" style="margin-right: 7%">
                    <div class="box_con">
                        <ul class="right_ul  allactis ">

                        </ul>
                    </div>
                </div>

            </div>
            <button class="save_setting" >保存</button>
        </div>
    </div>
</div>

<script>

    var usuallyMenu = {};
    var formId

    $(function(){
        //数据回显
        $.ajaxSettings.async = false;
        $.post('/flow/flowTypequeryList', {
            flowId: $.GetRequest().flowId,
        }, function(res){
            var data=res.object
            formId=data.formId
            var queryField=data.queryField
            var queryListField=data.queryListField
            //是否新建回显
            $("input[name='queryNewYn']").each(function (){
                var str = $(this).val();
                if (str == data.queryNewYn) {
                    $(this).attr("checked",true);
                }
            });
            //查询数据
            if(queryField!=undefined){
                if(queryField!=''){
                    var queryFieldAll=queryField.substring(0,queryField.length-1).split(',')
                    // console.log(queryFieldAll)
                    var objQuery={}
                    queryFieldAll.forEach(function (item,index) {
                        objQuery[item.split('||')[0]]=item.split('||')[item.split('||').length-1]
                    })
                    // console.log(objQuery)
                }
                var strQuery=''
                for(var key in objQuery){
                    strQuery+='<li id="'+objQuery[key]+'" class="ul_item li_item item">'+key+'</li>'
                }
                $('.exchangeTop .left_ul').html(strQuery)
            }
            //列表数据
            if(queryListField!=undefined){
                if(queryListField!=''){
                    var queryListFieldAll=queryListField.substring(0,queryListField.length-1).split(',')
                    // console.log(queryListFieldAll)
                    var objList={}
                    queryListFieldAll.forEach(function (item,index) {
                        objList[item.split('||')[0]]=item.split('||')[item.split('||').length-1]
                    })
                    // console.log(objList)
                }
                var strList=''
                for(var key in objList){
                    strList+='<li id="'+objList[key]+'" class="ul_item li_item item">'+key+'</li>'
                }
                $('.exchangeBottom .left_ul').html(strList)
            }



        });
        $.ajaxSettings.async = true;

        // 获取当前用户的所有菜单
        function showMenu() {
            /* $.get('/showMenu', function (res) {
                 if (res.flag) {
                     var data = buildData(res.obj, []);
                     var str = '';
                     data.forEach(function (item) {
                         if (item.img) {
                             str += '<li class="ul_item">-----[' + item.name + ']-----</li>'
                         } else if (!item.child || item.child.length == 0) {
                             var styleStr = '';
                             if (usuallyMenu[item.fId]) {
                                 styleStr = 'style="display:none;"'
                             }
                             str += '<li id="' + item.fId + '" class="ul_item li_item item" '+styleStr+'>' + item.name + '</li>'
                         }
                     });
                     $('.right_ul').append(str);
                 }
             });*/
            workForm.init({
                    formhtmlurl: '../../form/formType',
                    resdata: {
                        fromId:formId
                    },
                    flag: 3
                },
                function (datas) {
                    processData = datas;
                    var liStrs='';//流程
                    for(var m=0;m<processData.length;m++){
                        liStrs+='<li id="'+processData[m].name+'" class="ul_item li_item item">'+processData[m].title+'</li>'
                    }
                    /*if($('[name="dataDirection"]').val()==1){
                        $('.right_ul').html(liStrs)
                    }else if($('[name="dataDirection"]').val()==2){
                        $('.right_ul').html(liStrs)
                    }*/
                    $('.right_ul').html(liStrs)
                    $('.right_ul2').html(liStrs)
                });
        }
        showMenu()
        // 获得已设置的常用应用列表
        /*$.get('/form/formType',{fromId:$.GetRequest().flowId}, function(res){
            if (res.flag) {
                var str = '';
                res.obj.forEach(function(item){
                    str += '<li id="'+item.fId+'" class="ul_item li_item item">'+item.name+'</li>';
                    usuallyMenu[item.fId] = item.fId;
                });
                $('.left_ul').append(str);
            }
            showMenu();
        });*/

        $(document).delegate('.allacti>li','click',function () {
            $(this).parent().find('li').removeClass('active')
            $(this).addClass('active')

        })
        $(document).delegate('.allactis>li','click',function () {
            $(this).parent().find('li').removeClass('actives')
            $(this).addClass('actives')

        })

        //查询右移
        $('.exchangeTop .btn-left').click(function(){
            var id = $('.exchangeTop .active.item').attr('id');
            if($('.exchangeTop .item.active')){
                $('#'+id, $('.exchangeTop .right_ul')).show();
                $('.exchangeTop .item.active').remove();
            }else{
                alert('请选择字段！')
            }
        });
        //查询左移
        $(".exchangeTop .btn-right").click(function(){
            var id = $('.exchangeTop .actives.item').attr('id');
            var $leftUl = $('.exchangeTop .left_ul');
            var $checkItem = $('#'+id, $leftUl);
            if ($checkItem.length > 0) {
                return false;
            }
            $checkItem = $('.exchangeTop .actives.item').removeClass("actives").clone();
            $leftUl.append($checkItem);
            $('#'+id, $('.exchangeTop .right_ul')).hide();
            if(id==null){
                alert('请选择字段！')
            }

        });
        //列表右移
        $('.exchangeBottom .btn-left').click(function(){
            var id = $('.exchangeBottom  .active.item').attr('id');
            if($('.exchangeBottom  .item.active')){
                $('#'+id, $('.exchangeBottom  .right_ul')).show();
                $('.exchangeBottom  .item.active').remove();
            }else{
                alert('请选择字段！')
            }
        });
        //列表左移
        $(".exchangeBottom .btn-right").click(function(){
            var id = $('.exchangeBottom  .actives.item').attr('id');
            var $leftUl = $('.exchangeBottom  .left_ul');
            var $checkItem = $('#'+id, $leftUl);
            if ($checkItem.length > 0) {
                return false;
            }
            $checkItem = $('.exchangeBottom  .actives.item').removeClass("actives").clone();
            $leftUl.append($checkItem);
            $('#'+id, $('.exchangeBottom  .right_ul')).hide();
            if(id==null){
                alert('请选择字段！')
            }

        });

        // 保存设置
        $('.save_setting').on('click', function(){
            //获取查询字段配置
            var query=$('.exchangeTop .left_ul li')
            var queryField=''
            query.each(function () {
                queryField+=$(this).text()+'||'+$(this).attr('id')+','
            })
            // console.log(queryField)
            //获取列表字段配置
            var list=$('.exchangeBottom .left_ul li')
            var queryListField=''
            list.each(function () {
                queryListField+=$(this).text()+'||'+$(this).attr('id')+','
            })
            // console.log(queryListField)
            $.post('/flow/updateQueryList', {
                queryField: queryField,
                queryListField:queryListField,
                queryNewYn:$('[name="queryNewYn"]:checked').val(),
                flowId: $.GetRequest().flowId
            }, function(res){
                if(res.flag){
                    layer.msg('保存成功！',{icon:'1'});
                }

            });
        });

    });
</script>

</body>
</html>

